<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./products.js"></script>
    <script>
      // 全局变量products
      console.log(products);
      // 要求：先到控制台观察数据的属性和解构，然后按要求筛选或转换数据
      // 商品名字段name
      // 0. 取itemType是'ART' 并且 price.regularPrice<200
      console.log(
        products.filter(
          (p) => p.itemType === "ART" && p.price.regularPrice < 200
        )
      );

      // 1.取出所有类型（productType）为 “背包”且颜色（designText）不为“蓝色”的商品

      console.log(
        products.filter(
          (p) => p.productType === "背包" && p.designText != "蓝色"
        )
      );

      // 2.取出所有类型（productType）含有“袋”字，并且是新品（new=true）的商品名字的数组
      // filter -> indexOf

      console.log(
        products.filter(
          (p) => p.productType.indexOf("袋") != -1 && p.new == true
        )
      );

      // 3.选出价格最贵（价格的属性price.regularPrice）的十个商品(从高到低)，并转换为html字符串，html的格式为
      /*
  <ul>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
  </ul>
*/
//       let arr = products.map(function (v) {
//         return v.price.regularPrice;
//       });
//       arr = arr.sort(function (a, b) {
//         return b - a;
//       });
//       arr.length = 10;
//       var newArr = [];
//       for (let i = 0; i < products.length; i++) {
//         for (let j = 0; j < arr.length; j++) {
//           if (products[i].price.regularPrice == arr[j]) {
//             newArr.push(products[i]);
//           }
//         }
//       }
//       newArr = newArr.sort(function (a, b) {
//         return b.price.regularPrice - a.price.regularPrice;
//       });
//       document.documentElement.innerHTML =
//        `<ul>
//    ${newArr.map(function (k) {
//           return ` <li>< img src=${k.image} style='list-style:none' />${k.name}:${k.price.regularPrice}</li>`;
//         }).join("")}
//   </ul>`;

console.log(
  products.sort(function({price:{regularPrice:a}},{price:{regularPrice:b}}){
    return b-a
  }).slice(0,10).map(function(v){
   return `
    <li><img src='${v.image}'  style='list-style:none'/>${v.name}:${v.price.regularPrice}</li>`
}).join("")

);

    </script>
  </body>
</html>
